<template>
  <div class="uploader">
    <input type="file" @change="onFileChange" accept="image/*" />
  </div>
</template>

<script>
export default {
  methods: {
    async onFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        // 创建 FormData 对象
        const formData = new FormData();
        formData.append('file', file); // 使用与后端一致的键
        this.$emit('file-selected', formData);

        // try {
        //   // 调用图像识别接口
        //   const response = await fetch('http://127.0.0.1:5002/predict', {
        //     method: 'POST',
        //     body: formData
        //   });
        //
        //   if (!response.ok) {
        //     throw new Error('网络响应不正常');
        //   }
        //
        //   const data = await response.json();
        //   // 处理识别结果
        //   this.$emit('file-selected', data); // 假设接口返回识别结果
        // } catch (error) {
        //   console.error('图像识别失败:', error);
        // }
      }
    }
  }
};
</script>

<style scoped>
.uploader {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

input[type="file"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>